<template>
  <Modal
    v-model="visibile"
    class="edit-modal modal-p10"
    :title="title"
    :closable="false"
    :mask-closable="false"
    width="55%"
    :styles="{ top: '30px', height: '80%' }"
  >
    <div class="formBox">
      <Form :model="formItem" :label-width="150" ref="formItem" :labelWidth="100">
        <Row>
          <i-col :span="12">
            <FormItem label="表具ID" prop="meterId">
              <InputNumber v-model.trim="formItem.meterId" placeholder="请输入表具ID" style="width: 100%" disabled />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="用户ID" prop="unitId">
              <InputNumber v-model.trim="formItem.unitId" placeholder="请输入用户ID" style="width: 100%" disabled />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="设备号" prop="deviceNo">
              <Input v-model.trim="formItem.deviceNo" placeholder="请输入设备号" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="RTU主键ID" prop="rtuId">
              <Input v-model.trim="formItem.rtuId" placeholder="请输入RTU主键ID" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="表通讯号" prop="meterNo">
              <Input v-model.trim="formItem.meterNo" placeholder="请输入表通讯号" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="次级部门" prop="sector">
              <Select v-model="formItem.sector" placeholder="次级部门">
                <Option v-for="(type, index) in sectorList" :key="index" :value="type.value">{{ type.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="表类型" prop="meterType">
              <Select v-model="formItem.meterType" placeholder="表类型">
                <Option v-for="(type, index) in meterTypeList" :key="index" :value="type.value">{{
                  type.value
                }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="用气性质" prop="meterGasClass">
              <Select v-model="formItem.meterGasClass" placeholder="用气性质">
                <Option v-for="(type, index) in gasClassList" :key="index" :value="type.value">{{ type.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="初始读数" prop="meterInitScale">
              <Input v-model.trim="formItem.meterInitScale" placeholder="请输入初始读数" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="安装时间" prop="installTime">
              <DatePicker type="date" v-model="formItem.meterInstallTime" placeholder="安装时间" style="width: 100%" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="接收时间" prop="js_time">
              <DatePicker type="date" v-model="formItem.js_time" placeholder="接收时间" style="width: 100%" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="型号" prop="modelNo">
              <Input v-model.trim="formItem.modelNo" placeholder="请输入型号" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最大流量" prop="maxValue">
              <Input v-model.trim="formItem.maxValue" placeholder="请输入额定最大流量" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最小流量" prop="minValue">
              <Input v-model.trim="formItem.minValue" placeholder="请输入额定最小流量" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最大温度" prop="maxTemp">
              <Input v-model.trim="formItem.maxTemp" placeholder="请输入额定最大温度" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最小温度" prop="minTemp">
              <Input v-model.trim="formItem.minTemp" placeholder="请输入额定最小温度" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最大压力" prop="maxPress">
              <Input v-model.trim="formItem.maxPress" placeholder="请输入额定最大压力" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="额定最小压力" prop="minPress">
              <Input v-model.trim="formItem.minPress" placeholder="请输入额定最小压力" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="表具X经纬度坐标" prop="latitude">
              <Input v-model.trim="formItem.latitude" placeholder="请输入表具X经纬度坐标" />
            </FormItem>
          </i-col>
          <i-col :span="12">
            <FormItem label="表具Y经纬度坐标" prop="longitude">
              <Input v-model.trim="formItem.longitude" placeholder="请输入表具Y经纬度坐标" />
            </FormItem>
          </i-col>
          <i-col :span="24">
            <FormItem label="安装地址" prop="meterAdd">
              <Input v-model.trim="formItem.meterAdd" placeholder="请输入安装地址" />
            </FormItem>
          </i-col>
        </Row>
      </Form>
    </div>
    <div slot="footer" style="padding-right:20px;">
      <Button @click="handleCancel">取消</Button>
      <Button @click="handleOK" type="warning" :loading="saveBtnLoading">确认</Button>
    </div>
  </Modal>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import dayjs from 'dayjs'
const { mapState } = createNamespacedHelpers('meterManageQuery')

export default {
  name: 'meter-manage-query-edit-form',
  props: {
    formData: {
      type: Object
    },
    visibile: {
      type: Boolean
    },
    title: {
      type: String,
      default: '编辑'
    }
  },
  data() {
    return {
      formObj: {
        meterId: undefined,
        deviceNo: undefined,
        unitId: undefined,
        rtuId: undefined,
        meterNo: undefined,
        sector: undefined,
        meterType: undefined,
        meterAdd: undefined,
        meterGasClass: undefined,
        meterInitScale: undefined,
        meterInstallTime: undefined,
        js_time: undefined,
        modelNo: undefined,
        maxValue: undefined,
        minValue: undefined,
        maxTemp: undefined,
        minTemp: undefined,
        maxPress: undefined,
        minPress: undefined,
        latitude: undefined,
        longitude: undefined
      }
    }
  },
  computed: {
    ...mapState(['meterTypeList', 'gasClassList', 'sectorList', 'saveBtnLoading']),
    formItem() {
      return {
        ...this.formObj,
        ...this.formData
      }
    }
  },
  methods: {
    handleCancel() {
      this.$refs['formItem'].resetFields()
      this.$emit('handleCancel')
    },
    handleOK() {
      this.$refs['formItem'].validate(valid => {
        if (valid) {
          // eslint-disable-next-line camelcase
          const { meterInstallTime, js_time } = this.formItem
          this.$emit('handleSave', {
            ...this.formItem,
            meterInstallTime: meterInstallTime && dayjs(meterInstallTime).format('YYYY-MM-DD'),
            // eslint-disable-next-line camelcase
            js_time: js_time && dayjs(js_time).format('YYYY-MM-DD')
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
